<template>
	<view class="page-container">
		<uni-nav-bar @clickLeft="clickLeft" left-icon="left" title=" Forget " statusBar="true" />
		<view class="container">
			<tabs :tabs="tabsList" class="tabs-container" :select="select" @onChange="tabChange" />
			<e-input v-if="select === 0" isNumber placeholder="Mobile Number" @onInput="(e) => getInputInfo({
					label: 'account',
					value: e
				})" class="form-column ">
				<template #icon>
					<picker @change="selectState" @click="pickerClick" :value="index" :range="array">
						<view class="mobile-icon">
							<image class="img" src="./../../static/state.png"></image><span>+91</span>
						</view>
					</picker>
				</template>
			</e-input>

			<view v-if="select === 0" style="height: 1px;"></view>

			<e-input v-if="select === 1" placeholder="email" @onInput="(e) => getInputInfo({
					label: 'account',
					value: e
				})" class="form-column ">
				<template #icon>
					<image class="img" src="./../../static/Email.png"></image>
				</template>
			</e-input>

			<view style="height: 1px;"></view>

			<e-input isSendMessage :phone="forgetInfo.account" placeholder="Verification Code" @onInput="(e) => getInputInfo({
						label: 'verification',
						value: e
					})" class="form-column ">
				<template #icon>
					<image class="img" src="./../../static/Verification.png"></image>
				</template>
			</e-input>

			<view style="height: 1px;"></view>

			<e-input ispassword placeholder="New password" @onInput="(e) => getInputInfo({
					label: 'password',
					value: e
				})" class="form-column">
				<template #icon>
					<image class="img" src="./../../static/password.png"></image>
				</template>
			</e-input>

			<button @click="continueSubmit" class="login-btn">continue</button>

		</view>
	</view>
</template>

<script>
	import tabs from '../../components/tabs/tabs.vue'
	import EInput from '../../components/input/input.vue'
	export default {
		components: {
			tabs,
			EInput
		},
		data() {
			return {
				select: 0,
				index: 0,
				array: ['+91'],
				forgetInfo: {
					account: '',
					verification: '',
					password: ''
				},
				tabsList: [{
					label: 'Phone Forget',
					id: 0
				}, {
					label: 'Email Forget',
					id: 1
				}]
			}
		},
		onLoad() {

		},
		methods: {
			tabChange({
				id
			}) {
				this.select = id
			},
			clickLeft() {
				uni.navigateBack(-1)
			},
			pickerClick() {
				const c = document.querySelector('.uni-picker-action.uni-picker-action-cancel')
				if (c) {
					c.innerHTML = 'cancel'
				}
				const co = document.querySelector('.uni-picker-action.uni-picker-action-confirm')
				if (co) {
					co.innerHTML = 'confirm'
				}
			},
			selectState() {
				console.log('+91')
			},
			getInputInfo({
				label,
				value
			}) {
				this.forgetInfo[label] = value
			},
			continueSubmit() {
				const {
					account,
					verification,
					password
				} = this.forgetInfo
				if (this.select === 0 && !account && account !== 0) {
					return this.toast('Please input phone')
				}
				if (this.select === 0 && !verification && verification !== 0) {
					return this.toast('Please input captcha')
				}
				if (this.select === 1 && !account && account !== 0) {
					return this.toast('Please input email')
				}
				if (this.select === 1 && account.indexOf('@') < 0) {
					return this.toast('Please enter the correct email format')
				}
				if (!password && password !== 0) {
					return this.toast('Please input password')
				}
				this.toast('Invalid verification code')
			},
			toast(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.tabs-container {
			margin-bottom: 24px;
		}

		.form-column {
			margin: 12px 0;
		}



		.login-btn {
			margin-top: 20px;
			background-color: #c7984a;
			color: #362109;
		}

		.mobile-icon {
			display: flex;
			align-items: center;
			font-size: 18px;

			>img {
				margin-right: 5px;
			}
		}

		.img {
			width: 24px;
			height: 24px;
		}

	}
</style>
